<template>

   <!-- 
      echarts初体验
         1. 安装 echarts  =》 官网  npm install echarts --save
         2. 引入   import * as echarts from 'echarts';
         3. 添加图表
            1) 创建一个容器（画布）来绘制图表，容器要设置宽高
            2) 添加echarts 配置，画图表   ===》 本质 做的是dom操作
    -->

   <div>
      <div id="main" :style="{ width: 600 + 'px', height: 500 + 'px' }"></div>
   </div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts';
import { onMounted } from 'vue'

onMounted(() => {  //创建echarts 配置
   // 基于准备好的dom，初始化echarts实例
   var myChart = echarts.init(document.getElementById('main'));
   // 绘制图表
   myChart.setOption({
      title: {  // 标题
         text: 'ECharts 入门示例  标题'
      },
      tooltip: {   // 是否显示提示框组件。 鼠标停留时显示
         trigger: 'item'
      },
      xAxis: {
         data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子', '毛衣']
      },
      yAxis: {},
      series: [
         {
            name: '销量',
            type: 'bar',
            // type: 'line',
            data: [40, 20, 36, 10, 14, 20, 20]
         },
         {
            name: '销量',
            type: 'line',
            // type: 'line',
            data: [30, 30, 36, 55, 24, 20, 40]
         }
      ]
   });
})


</script>

<style>

</style>